<template>
    <div>
        <div class="container2_emphasis_firm">
            <el-dropdown size="small" split-button type="primary" class="container2-place">
                {{ videoData[0].deviceName }}
                <el-dropdown-menu slot="dropdown" class="container2-ulBox userFlex">
                    <el-dropdown-item @click.native="handleDropdownItemClick(item)" v-for="(item, index) in videoValue" :key="index">
                        {{ item.channelName }}
                    </el-dropdown-item>
                </el-dropdown-menu>
            </el-dropdown>

            <div id="emphas" class="ws-player"></div>
        </div>
    </div>
</template>

<script>
import { getIntellect } from "@/api/safety/axios";
import PlayerManager from "@/components/iccs/PlayerManager";

export default {
    name: "VideoPlayer",
    props: {
        targetKeywords: Array,
        keywords: Array,
        facilityData: Array,
    },
    data() {
        return {
            myPlayer: null,
            videoValue: "",
            videoData: "",
            selectedFacility: null,
            playerOptions: {
                controls: true,
                playbackRates: [0.5, 1.0, 1.5, 2.0], // 可选的播放速度
                autoplay: true,
                muted: true,
                loop: false,
                techOrder: ["html5"],
                preload: "auto",
                language: "zh-CN",
                aspectRatio: "16:9",
                fluid: true,
                sources: [], // sources will be dynamically updated
                poster: "",
                notSupportedMessage: "此视频暂无法播放，请稍后再试",
                controlBar: {
                    timeDivider: true,
                    durationDisplay: true,
                    remainingTimeDisplay: true,
                    fullscreenToggle: true,
                },
            },
        };
    },
    mounted() {
        this.getVideo();
    },
    beforeDestroy() {
        this.closeVideo();
    },
    methods: {
        getVideo() {
            this.myPlayer = new PlayerManager({
                el: "emphas", // 实时预览容器id
                // pztEl: "ws-pan-tilt", // 云台控制容器id
                type: 'real', // real - 实时预览
                maxNum: 1, // 最多显示的窗口
                num: 1, // 初始化显示的窗口
                showControl: true, // 默认是否显示工具栏
                // serverIp: "172.22.12.15", // 代理IP
                streamServerIp: "172.22.12.15", // 流媒体服务 Ip 地址 【如果拉流端口发生改变时，需拼接端口 】
                // proxyServerIp: "http://localhost:85/", // 代理服务器 Ip 地址 【直连模式不传】
                useNginxProxy: false, // 拉流模式 【true-代理模式拉流，false-直连拉流】
                // receiveMessageFromWSPlayer, // 接收来自wsplayer的回调
                /* 下面为播放器返回的回调函数，可以在下面监听各种回调事件 */
                receiveMessageFromWSPlayer: (methods, data) => {
                    switch (methods) {
                        case 'initializationCompleted':
                            // 初始化完成，可调用播放方法（适用于动态加载解码库）
                            // 若回调未触发时就使用实时预览/录像回放，则无法播放。
                            // 此时我们可以调用一个
                            console.log("初始化播放器成功", data);
                            this.myPlayer.playRealVideo({
                                channelList: [{
                                    // id: String(this.selectedFacility), /** 在线的通道id **/
                                    id: String(this.facilityData[0].channelCode),
                                    isOnline: true, /** 设备是否在线，非在线无法播放 **/
                                }],
                                streamType: "1"
                            })
                            break;
                        case "realSuccess": // 实时预览成功
                            console.log("实时预览成功")
                            break;
                        case "realError": // 实时预览失败
                            console.log("实时预览失败")
                            break;
                        case "talkError": // 对讲失败
                            console.log("对讲失败");
                            break;
                        case 'selectWindowChanged': // 选中的窗口发生改变
                            console.log(data, "返回窗口信息")
                            break;
                        case 'windowNumChanged': // 播放器显示的路数发生改变
                            console.log(data, "返回显示的窗口数量")
                            break;
                        case 'closeVideo': // 视频关闭回调
                            // 点击关闭按钮引发的视频关闭进行提示
                            // 切换视频引发的视频关闭不进行提示
                            if (!data.changeVideoFlag) {
                                console.log(`窗口${data.selectIndex}的视频已关闭`)
                            }
                            break;
                        case 'statusChanged': // 视频状态发生改变
                            if(!this.start){
                                setTimeout(()=>{
                                    clearTimeout()
                                    this.myPlayer.playRealVideo({
                                        channelList: [{
                                            id: String(this.facilityData[0].channelCode), /** 在线的通道id **/
                                            isOnline: true, /** 设备是否在线，非在线无法播放 **/
                                        }],
                                        streamType: "1",
                                    })
                                    this.start = true
                                },500)
                                window.initPlay=true;
                            }
                            break;
                        case 'errorInfo': // 错误信息汇总
                            console.log(data, "可打印查看错误消息");
                    }
                }
            })

        },
        handleDropdownItemClick(item) {
            this.selectedFacility = item.channelCode;
            if (this.myPlayer) {
                this.myPlayer.playRealVideo({
                    channelList: [
                        {
                            id: String(this.selectedFacility),
                            isOnline: true,
                        },
                    ],
                    streamType: "1",
                });
            }
        },
        closeVideo() {
            if (this.myPlayer != null) {
                this.myPlayer.dispose();
                this.myPlayer = null;
            }
        },

    },
};
</script>

<style lang="scss">
.height200 {
    width: 570px;
    height: 200px;
    display: flex;
    flex-direction: column;

    .el-scrollbar__wrap {
        overflow-x: hidden;
    }

    .el-scrollbar__thumb {
        background-color: #189DC5;
    }

    .el-scrollbar__bar {
        &.is-vertical {
            width: 2px; //滚动条宽度
        }
    }
}

.statistical-scrollbar {
    width: 220px;
    height: 130px;
    display: flex;
    flex-direction: column;

    .el-scrollbar__wrap {
        overflow-x: hidden;
    }

    .el-scrollbar__thumb {
        background-color: #189DC5;
    }

    .el-scrollbar__bar {
        &.is-vertical {
            width: 2px; //滚动条宽度
        }
    }
}

.camera {
    .el-dropdown .el-button-group {
        height: 28px;
        width: 150px;

        .el-button--primary {
            background: rgba(98, 183, 255, 0.2);
            box-shadow: inset 0px 0px 12px 0px #62b7ff;
            border: 1px solid #62b7ff;
        }
    }

    &-ulBox2 {
        width: 105px;
        height: 50px;
        background: #082048;
        box-shadow: inset 0px 0px 12px 0px #62b7ff;
        border: 1px solid #62b7ff;
    }
}

.container2 {
    .el-dropdown .el-button-group {

        .el-button--primary {
            background: rgba(98, 183, 255, 0.2);
            box-shadow: inset 0px 0px 12px 0px #62b7ff;
            border: 1px solid #62b7ff;
        }
    }

    &-ulBox {
        width: 190px;
        height: 50px;
        background: #082048;
        box-shadow: inset 0px 0px 12px 0px #62b7ff;
        border: 1px solid #62b7ff;
    }
}

@media screen and (min-width: 1000px) and (max-width: 3000px) {
    $width_2k: 1920;
    $height_2k: 1080;
    $width: 4000;
    $height: 1486;
    $unit: px;
    @function calWidth_2k($pixel) {
        @return $width_2k*$pixel/$width;
    }
    @function calHeight_2k($pixel) {
        @return $pixel/1.8*2.7;
    }
    @function calFont_2k($pixel) {
        @return $height_2k*$pixel/$height;
    }
    .container {
        height: calHeight_2k(28px);

        &-ulBox2 {
            height: calHeight_2k(50px);
        }
    }

    .height200 {
        height: calHeight_2k(200px);

        .el-scrollbar__wrap {
        }

        .el-scrollbar__thumb {
        }

        .el-scrollbar__bar {
            &.is-vertical {
            }
        }
    }

    .statistical-scrollbar {
        height: calHeight_2k(130px);

        .el-scrollbar__wrap {
        }

        .el-scrollbar__thumb {
        }

        .el-scrollbar__bar {
            &.is-vertical {
            }
        }
    }
}

.userFlex {
    scrollbar-width: none; /* firefox */
    -ms-overflow-style: none; /* IE 10+ */
    overflow-y: auto;
}

.userFlex::-webkit-scrollbar {
    display: none; /* Chrome Safari */
}
</style>
<style scoped lang="scss">
.ws-player {
    width: 260px;
    height:200px !important;
    margin-top: 10px;
}

.container2 {
    width: 280px;
    height: 200px;
    padding-left: 22px;
    background-size: 100% 100%;
    display: flex;
    background-image: url("@/assets/bg_left1.png");
    flex-direction: column;

    &_emphasis {
        width: 260px;
        height: 520px;

        &_firm {
            width: 100%;
            height: 180px;
            margin-top: 10px;
            position: relative;

            &_fontColor {
                font-size: 14px;
                font-family: Noto Sans SC-Medium, Noto Sans SC;
                font-weight: 500;
                color: #00e6ff;
                margin-bottom: 5px;
            }

            &_imgBox {
                width: 100%;
                height: 154px;
                margin-top: 8px;
                background-size: 100% 100%;
                background-image: url("@/assets/bg_pt.png");
            }
        }
    }
}
@media screen and (min-width: 2000px) and (max-width: 3000px) {
    $width_2k: 1920;
    $height_2k: 1080;
    $width: 4000;
    $height: 1486;
    $unit: px;
    @function calWidth_2k($pixel) {
        @return $width_2k*$pixel/$width;
    }
    @function calHeight_2k($pixel) {
        @return $pixel/1.8*2.7;
    }
    @function calFont_2k($pixel) {
        @return $height_2k*$pixel/$height;
    }

    .ws-player {
        height: calHeight_2k(120px);
        margin-top: calHeight_2k(16px);
    }
    .container2 {
        height: calHeight_2k(200px);

        &_emphasis {
            height: calHeight_2k(520px);

            &_firm {
                height: calHeight_2k(180px);
                margin-top: calHeight_2k(10px);

                &_fontColor {
                    margin-bottom: calHeight_2k(5px);
                }

                &_imgBox {
                    height: calHeight_2k(154px);
                    margin-top: calHeight_2k(8px);
                }
            }
        }
    }

}

@media screen and (min-width: 1000px) and (max-width: 1999px) {
    $width_2k: 1920;
    $height_2k: 1080;
    $width: 4000;
    $height: 1486;
    $unit: px;
    @function calWidth_2k($pixel) {
        @return $width_2k*$pixel/$width;
    }
    @function calHeight_2k($pixel) {
        @return $pixel/1.8*2.7;
    }
    @function calFont_2k($pixel) {
        @return $height_2k*$pixel/$height;
    }
    .ws-player {
        height: calHeight_2k(120px);
        margin-top: calHeight_2k(16px);
    }
    .container2 {
        height: calHeight_2k(200px);

        &_emphasis {
            height: calHeight_2k(520px);

            &_firm {
                height: calHeight_2k(180px);
                margin-top: calHeight_2k(10px);

                &_fontColor {
                    margin-bottom: calHeight_2k(5px);
                }

                &_imgBox {
                    height: calHeight_2k(154px);
                    margin-top: calHeight_2k(8px);
                }
            }
        }
    }
}
</style>